<template>
	<view class="content">
		<!-- 菜单 -->
		<view class="top-warp">
			<me-tabs v-model="tabIndex" :tabs="tabs" :height="80" @change="tabChange"></me-tabs>
		</view>
		<mescroll-uni :fixed="false" top="100" height="100%" ref="mescrollRef" @init="mescrollInit" :up="upOption"
			@down="downCallback" @up="upCallback">
			<view class="process-item">
				<yzb-process-resume :list="list" @click="toDetail" @onDelete="toDelete"
					@ensure="toEnsure"></yzb-process-resume>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				clickable: true,
				list: [],
				tabs: [{
					name: "新简历",
					applyStatus: 1
				}, {
					name: "初筛",
					applyStatus: 3
				}, {
					name: "笔试",
					applyStatus: 4
				}, {
					name: "面试",
					applyStatus: 5
				}, {
					name: "录用",
					applyStatus: 6
				},{
					name: "不合适",
					applyStatus: 9
				}],
				tabIndex: 0, // tab下标
				upOption: {
					onScroll: true,
					auto: false, // 不自动加载
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '空空如也', // 提示
						icon: 'http://cdn.uviewui.com/uview/empty/data.png'
					}
				},
				query: {
					pageNo: 1,
					pageSize: 10,
					type: 1,
					applyStatus:1,
				}
			};
		},

		filters: {},

		onLoad() {},

		onShow() {
			this.getApplyComList(1, 10)
		},

		methods: {

			toDetail(item) {
				console.log("item===", item);
				uni.navigateTo({
					url: '/pages/user/process/resumeDetail?resumeId=' + item.resumeId+"&applyStatus="+item.applyStatus+"&applyId="+item.id
				})
			},

			getApplyComList(pageNum, pageSize) {
				this.query.page = pageNum;
				this.query.limit = pageSize;
				this.$apis.getApplyComList(this.query).then(res => {
					console.log('getApplyComList', res);
					if (pageNum == 1) {
						this.list = [];
					}
					if (res) {
						let data = res.records;
						this.list = this.list.concat(data);
						this.mescroll.endSuccess(res.records.length);
					}
				});
			},

			// 切换菜单
			tabChange(index) {
				console.log("tabChange===",index);
				console.log(this.tabs[index]);
				this.query.applyStatus=this.tabs[index].applyStatus;
				console.log("query===",this.query)
				this.list = [] // 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},

			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
			},

			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.mescroll.endSuccess(2);
				this.getApplyComList(page.num, page.size);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.content {
		flex-direction: column;
		align-items: center;
		height: 100vh;
		box-sizing: border-box;
	}

	.top-warp {
		z-index: 9990;
		position: fixed;
		top: --window-top;
		/* css变量 */
		left: 0;
		width: 100%;
		background-color: white;
	}

	.top-warp .tip {
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
	}


	.process-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		margin: 0 20upx;
	}
</style>